<template>
  <div class="data-v-cus-bar4" :style="hostStyle">
    <div v-for="(s, i) in series" :key="i" class="bar">
      <div class="bar-text">
        <div class="bar-name">{{ s.name | upper }}</div>
        <div class="bar-value">{{s.value}}</div>
        <!-- <div class="bar-percentage">{{getPercentage(s.value) * 100 + "%"}}</div> -->
      </div>
      <div class="bar-item">
        <div class="bar-item-inner" :style="sty(s)">
          <div class="pointer"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Color from 'color-js';
import { modifyOpacity } from '../color';
export default {
  name: "cus-bar4",
  props: ["series", "maxValue", "color"],
  computed: {
    hostStyle(){
      return {
        '--color-bg': modifyOpacity(this.color, 0.2),
        '--color-start': Color(this.color).darkenByAmount(0.35),
        '--color-pointer': Color(this.color).lightenByAmount(0.25),
      }
    }
  },
  filters: {
    upper(v) {
      return String(v).toUpperCase();
    }
  },
  methods: {
    getPercentage(value) {
      return value / this.maxValue;
    },
    sty(s) {
      return {
        width: this.getPercentage(s.value) * 100 + "%"
      };
    }
  }
};
</script>

<style lang="less">
.data-v-cus-bar4 {
  .bar {
    display: flex;
    height: 20px;
    align-items: center;
    position: relative;
    flex-direction: column;
    // border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    & + .bar {
      margin-top: 20px;
    }
    .bar-percentage{
      padding: 0 5px;
    }
    .bar-name {
      width: 100px;
      padding: 0 5px;
      // border: 1px solid rgba(255, 255, 255, 0.3);
      color: rgba(255, 255, 255, 0.8);
      text-align: left;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      height: 20px;
    }
    .bar-text{
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
    .bar-item {
      width: 100%;
      flex: 1;
      display: flex;

      background: #26282b;
      position: relative;
      color: rgba(255, 255, 255, 0.8);
      border-radius: 5px;
      // border-bottom: 1px solid var(--color);
      // border: 1px solid rgba(255, 255, 255, 0.2);

    }
    .bar-value{
      width: 80px;
      color: rgba(255, 255, 255, 0.8);
      // background: var(--color-bg);
      padding-left: 10px;
      margin-left: 5px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: right;
    }
    .bar-item-inner {
      width: 0;
      height: 5px;
      border-radius: 5px;
      background:  var(--color) linear-gradient(to right, var(--color-start), var(--color));
      transition: 0.25s;
      position: relative;

      .pointer{
        width: 10px;
        height: 10px;
        background:  var(--color-pointer);
        border-radius: 50%;
        position: absolute;
        right: -5px;
        top: -2px;
        box-shadow: 0 0 10px var(--color-pointer);
      }
    }
  }
}
</style>
